<template>
  <div class="main">
  <el-card shadow="hover" style="margin:0 0 20px 0">
    <template #header>
      <div class="card-header">
        <span><i class='el-icon-document-checked' style='font-size:20px'> 入职流程</i></span>
        <span style="float: right;">
          <a href=''><i class='el-icon-tickets' style="color:#409EFF"> 指南</i></a>
        </span>
      </div>
    </template>
		<el-steps :active="active" finish-status="success">
      <el-step
        v-for="(item,index) of stepTitle"
        :key="index"
        :title="item"
        :class="stepClassObj(index)"
        :description="description[index]"
        @click.native="handleStep(index)"/>
      </el-steps>
		</el-card>
    <!-- 内容展示区 -->
    <step-content1
      v-show="active === 0 "
      @handleNextStep="handleNextStep()"
    >
      <el-card class="box-card" shadow="hover">
        <template #header>
          <div class="card-header" align="center">
            <span style='font-size:20px'><i class="el-icon-reading"></i> 新员工入职流程</span>
          </div>
        </template>
        <Entry1 />
        <div align="center">
          <el-button @click="open2">已阅读</el-button>
        </div>
      </el-card>
    </step-content1>
    <step-content2
      v-show="active === 1 "
      @handleLastStep="handleLastStep()"
      @handleNextStep="handleNextStep()"
    >
      <el-card class="box-card" shadow="hover" >
        <template #header>
          <div class="card-header" align="center">
            <span span style='font-size:20px'><i class="el-icon-circle-check"></i> 提交入职申请</span>
          </div>
        </template>
        <Entry2 />
        <div align="center">
          <el-button type="primary" @click="open">确定提交</el-button>
        </div>
      </el-card>
    </step-content2>
    <step-content3
      v-show="active === 2 "
      @handleLastStep="handleLastStep()"
    >
      <el-card class="box-card">
          <template #header>
          <div class="card-header" align="center">
            <span span style='font-size:20px'><i class='el-icon-phone-outline'></i>背景调查</span>
          </div>
        </template>
        <Entry4/>
        <br>
        <div align="center">
          <el-button type="primary" @click="open1">确定提交</el-button>
        </div>
      </el-card>
    </step-content3>
    <step-content4
      v-show="active === 3 "
      @handleLastStep="handleLastStep()"
    >
      <el-card class="box-card">
          <template #header>
          <div class="card-header" align="center">
            <span span style='font-size:20px'><i class='el-icon-check'></i>入职成功</span>
          </div>
        </template>
        <Entry3/>
      </el-card>
    </step-content4>
  </div>
</template>
<script lang="ts">
import Entry1 from '/@/views/staff_entry/component/entry1.vue';
import Entry2 from '/@/views/staff_entry/component/entry2.vue';
import Entry3 from '/@/views/staff_entry/component/entry3.vue';
import Entry4 from '/@/views/staff_entry/component/entry4.vue';
import { formatDate } from '/@/utils/formatTime.ts';
import { toRefs, reactive, defineComponent, computed } from 'vue';

export default {
  name: 'entry',
  components:{Entry1,Entry2,Entry3,Entry4},
  setup() {
    const state = reactive({
		});
    // 时间获取
    let date = new Date()
		const currentTime = computed(() => {
      return formatDate(date, "YYYY-mm-dd HH:MM:SS");
		});
    return {
			currentTime,
			...toRefs(state),
		};
  },
  data() {
    return {
      // 步骤
      active: 0,
      // 已选步骤
      stepSuc: [0],
      // 步骤标题
      stepTitle: ['阅读入职流程', '提交入职申请','背调调查', '入职成功'],
      checked: false,
      description: ['2021/3/28 10:00:00','2021/3/28 10:00:00','2021/3/28 10:00:00'],
      count:0,
    }
  },

  methods: {
    //日期时间处理
    convert(val) {
      return val < 10 ? '0' + val : val
    },
    getDate() {
      return this.state.currentTime
    },
    // 点击步骤条
    handleStep(val) {
      if (this.stepSuc.includes(val) === true) {
        this.active = val
      }
    },
    // 组件点击上一步
    handleLastStep() {
      if (--this.active === 0) { this.active = 0 }
    },
    // 组件点击下一步
    handleNextStep() {
      if (this.active === 3) { this.active = 3 }
      else this.stepSuc.push(++this.active)
    },
    open() {
      this.$alert('是否提交入职申请...', '提示', {
        confirmButtonText: '确定',
        callback: action => {
          const loading = this.$loading({
            lock: true,
            text: '请稍等...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          setTimeout(() => {
            loading.close();
            this.stepSuc.push(++this.active);
            this.$message({
              type: 'success',
              message: '提交成功！'
            })
          }, 500);
        }
      });
    },
    open2() {
      const loading = this.$loading({
        lock: true,
        text: '正在保存请稍等...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
        this.stepSuc.push(++this.active);
        this.$message({
          type: 'success',
          message: '已保存！'
        })
      }, 500);
    },

    open1() {
      this.$confirm('<strong>你选择了3条信息</strong><br>第1条<br>第3条<br>第4条', '确认信息', {
        dangerouslyUseHTMLString: true,
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
      .then(() => {
        const loading = this.$loading({
          lock: true,
          text: '请稍等...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
          this.stepSuc.push(++this.active);
          this.$message({
          type: 'success',
          message: '发送成功！'
        })
        }, 500);
      })
      .catch(action => {
        this.$message({
          type: 'info',
          message: '取消'
        })
      });
    }
  },
  computed: {
    // 动态给步骤加样式
    stepClassObj(val) {
      return (val) => {
        return {
          stepSuc: this.stepSuc.includes(val),
          stepErr: !this.stepSuc.includes(val)
        }
      }
    }
  }
}
</script>
<style lang="scss">
.stepSuc :hover{
  cursor: pointer;
}
.stepErr :hover{
  cursor: not-allowed;
}
</style>
